<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./js/layui/css/layui.css" />
    <link rel="stylesheet" href="./js/swiper/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .swiper {
      margin-left: auto;
      margin-right: auto;
    }
  </style>
  <body>
    <!--index.wxml-->
    <div class="container">
      <div class="header">
        <div class="lt"></div>
        <div class="ct">首页</div>
        <div class="rt"></div>
      </div>
      <div class="search"></div>
      <div class="banner">
        <div class="swiper mySwiper2">
          <div class="swiper-wrapper" id="a-banner"></div>
       
          <div class="swiper-pagination swiper-pagination1 "></div>
        </div>
        <!-- 轮播图模块 -->
      </div>
      <!-- 菜单模块 -->
      <div class="m-menu">
        <a class="item" url="">
        <img src="http://192.168.21.69:8081/img/menu-0.9c1ccf1b.jpg" background-size="cover" />
        <span>居家</span>
      </a>
        <a class="item" url="">
        <img src="http://192.168.21.69:8081/img/menu-1.1e58295a.jpg" background-size="cover" />
        <span>餐厨</span>
      </a>
        <a class="item" url="">
        <img src="http://192.168.21.69:8081/img/menu-2.b66afb40.jpg" background-size="cover" />
        <span>配件</span>
      </a>
        <a class="item" url="">
        <img src="http://192.168.21.69:8081/img/menu-3.292eab05.jpg" background-size="cover" />
        <span>服装</span>
      </a>
        <a class="item" url="">
        <img src="http://192.168.21.69:8081/img/menu-4.49bfba93.jpg" background-size="cover" />
        <span>志趣</span>
      </a>
      </div>
      <!-- 品牌制造商直供 -->
      <div class="a-section a-brand">
        <div class="h">
          <a href="./brand.html">
            <span class="txt">品牌制造商直供</span>
          </a>
        </div>
        <div class="b" id="b-brand">
          <!-- ++++++++ -->
        </div>
      </div>
      <!-- 新品首发 -->
      <div class="a-section a-new">
        <div class="h">
          <div>
            <a href="./newGoods.html">
              <span class="txt">周一周四 · 新品首发</span>
            </a>
          </div>
        </div>
        <div class="b" id="b-goods">
          <!-- +++++ -->
        </div>
      </div>
      <!-- 人气推荐 -->
      <div class="a-section a-popular">
        <div class="h">
          <div>
            <a href="./hotGoods.html">
              <span class="txt">人气推荐</span>
            </a>
          </div>
        </div>
        <div class="b" id="b-popular"></div>
      </div>
      <!-- 专题精选 -->
      <div class="a-section a-topic">
        <div class="h">
          <div>
            <a href="./topic.html">
              <span class="txt">专题精选</span>
            </a>
          </div>
        </div>
        <div class="b">
          <!-- 这里要横向滚动 -->
          <div scroll-x="true" class="list">
            <div class="swiper mySwiper">
              <div class="swiper-wrapper" id="a-list"></div>
             
            </div>
          </div>
        </div>
      </div>
      <!-- 分类商品数据 -->
      <div id="g-grid"></div>
      <!-- 底部TabBar区域 -->
      <div class="tab-bar">
        <a href="index.html" class="active">
          <!-- <img src="./static/images/ic_menu_choice_nor.png" alt=""> -->
          <img src="./static/images/ic_menu_choice_pressed.png" alt="" />
          <span>首页</span>
        </a>
        <a href="topic.html">
          <img src="./static/images/ic_menu_topic_nor.png" alt="" />
          <!-- <img src="./static/images/ic_menu_topic_pressed.png" alt=""> -->
          <span>专题</span>
        </a>
        <a href="cate.html">
          <img src="./static/images/ic_menu_sort_nor.png" alt="" />
          <!-- <img src="./static/images/ic_menu_sort_pressed.png" alt=""> -->
          <span>分类</span>
        </a>
        <a href="cart.html">
          <img src="./static/images/ic_menu_shoping_nor.png" alt="" />
          <!-- <img src="./static/images/ic_menu_shoping_pressed.png" alt=""> -->
          <span>购物车</span>
        </a>
        <a href="user.html">
          <img src="./static/images/ic_menu_me_nor.png" alt="" />
          <!-- <img src="./static/images/ic_menu_me_pressed.png" alt=""> -->
          <span>我的</span>
        </a>
      </div>
    </div>
    <!-- 搜索栏数量模板 -->
    <script type="text/html" id="tpl-search">
      <a href="./search.html" class="input">
        <img class="icon" />
        <span class="txt">商品搜索, 共{{goodsCount}}款好物</span>
      </a>
    </script>
    <!-- 轮播图模板模块 -->
    <script type="text/html" id="tpl-banner">
      {{each banner}}
      <div class="swiper-slide">
        <div><img src="{{$value.image_url}}" alt="" /></div>
      </div>

      {{/each}}
    </script>
    <!-- 菜单数据模板模块 -->
    <script type="text/html" id="tpl-channel">
      {{each channel}}
      <a class="item" url="">
        <img src="{{$value.icon_url}}" background-size="cover" />
        <span>{{$value.name}}</span>
      </a>
      {{/each}}
    </script>
    <!-- 品牌供应商模块 -->
    <script type="text/html" id="tpl-brand">
      {{each brandList}}
      <div class="item item-1">
        <a href="./brandDetail.html">
          <div class="wrap">
            <img class="img" src="{{$value.pic_url}}" mode="aspectFill" />
            <div class="mt">
              <span class="brand">{{$value.name}}</span>
              <span class="price">{{$value.floor_price}}</span>
              <span class="unit">元起</span>
            </div>
          </div>
        </a>
      </div>
      {{/each}}
    </script>
    <!-- 新品首发 -->
    <script type="text/html" id="tpl-goods">
      {{each newGoodsList}}
      <div class="item">
        <a href="./goods.html?goodsid={{$value.id}}">
          <img
            class="img"
            src="{{$value.list_pic_url}}"
            background-size="cover"
          />
          <span class="name">{{$value.name}}</span>
          <span class="price">￥{{$value.retail_price}}</span>
        </a>
      </div>
      {{/each}}
    </script>
    <!-- 人气推荐 -->
    <script type="text/html" id="tpl-popular">
      {{each hotGoodsList}}
      <div class="item">
        <a href="./goods.html?goodsid={{$value.id}}">
          <img
            class="img"
            src="{{$value.list_pic_url}}"
            background-size="cover"
          />
          <div class="right">
            <div class="span">
              <span class="name">{{$value.name}}</span>
              <span class="desc">{{$value.goods_brief}}</span>
              <span class="price">￥{{$value.retail_price}}</span>
            </div>
          </div>
        </a>
      </div>

      {{/each}}
    </script>
    <script type="text/html" id="tpl-grid">
      {{each categoryList}}
      <div class="good-grid">
        <div class="h">
          <div>
            <span>{{$value.name}}</span>
          </div>
        </div>
        <div class="b">
          {{each $value.goodsList}}
          <a href="./goods.html?goodsid={{$value.id}}" class="item">
            <img
              class="img"
              src="{{$value.list_pic_url}}"
              background-size="cover"
            />
            <div class="name">{{$value.name}}</div>
            <div class="price">￥{{$value.retail_price}}</div>
          </a>
          {{/each}}
        </div>
      </div>

      {{/each}}
    </script>

    <!-- 专题推荐 -->
    <script type="text/html" id="tpl-list">
      {{each topicList}}
      <div class="swiper-slide">
        <div class="item">
          <a href="topicDetail.html">
            <img
              class="img"
              src="{{$value.item_pic_url}}"
              background-size="cover"
            />
            <div class="np">
              <span class="name">{{$value.title}}</span>
              <span class="price">￥{{$value.price_info}}元起</span>
            </div>
            <span class="desc">{{$value.subtitle}}</span>
          </a>
        </div>
      </div>

      {{/each}}
    </script>
    <script src="./js/layui/layui.all.js"></script>
    <script src="./js/jquery.js"></script>
    <script src="./js/swiper/swiper-bundle.min.js"></script>
    <script src="./js/template-web.js"></script>
    <script src="./js/baseAPI.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
    <script src="./js/index.js"></script>
    <!-- <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script> -->
  </body>
</html>
